<template>
    <el-dialog 
        :model-value="addVisible" 
        :title="props.info ? '编辑字典' : '新增字典'" 
        width="500px"
        :before-close="handleClose"
    >
        <el-form 
            :model="form" 
            label-width="100px" 
            class="form" 
            :rules="rules" 
            ref="ruleFormRef"
        >
            
            <el-form-item label="字典类型" prop="dictType" :rules="[{ required: true, message: '请输入字典类型', trigger: 'blur' }]">
                <el-input v-model="form.dictType" placeholder="例如：sex、status等" />
            </el-form-item>
            
            <el-form-item label="字典名称" prop="dictName" :rules="[{ required: true, message: '请输入字典名称', trigger: 'blur' }]">
                <el-input v-model="form.dictName" />
            </el-form-item>
            
            <el-form-item label="字典键" prop="dictKey" :rules="[{ required: true, message: '请输入字典键', trigger: 'blur' }]">
                <el-input v-model="form.dictKey" />
            </el-form-item>

            
            <el-form-item class="btn">
                <el-button type="primary" @click="submit(ruleFormRef)">确定</el-button>
                <el-button @click="close(ruleFormRef)">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, defineEmits, watch } from 'vue'
import { addDict, updateDict } from '../../../../http'
import { DictModel } from '../class/DictModel'
import { ElMessage } from "element-plus"
import type { FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()

// 接收父组件参数
const props = defineProps({
    addVisible: Boolean,
    info: String
})

// 表单数据
const form = ref({
    dictId: 0,
    dictType: "",
    dictName: "",
    dictKey: "",
    dictValue: "",
    sort: 0,
    status: 1,
    remark: "",
    createTime: "",
    updateTime: ""
})

// 表单验证规则
const rules = reactive<FormRules>({
    dictType: [{ required: true, message: '请输入字典类型', trigger: 'blur' }],
    dictName: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
    dictKey: [{ required: true, message: '请输入字典键', trigger: 'blur' }],
    dictValue: [{ required: true, message: '请输入字典值', trigger: 'blur' }]
})

// 监听info变化，初始化表单数据
watch(
    () => props.info,
    (newInfo) => {
        if (newInfo) {
            const currInfo: DictModel = JSON.parse(newInfo)
            form.value = {
                ...currInfo
            }
        } else {
            form.value = {
                dictId: 0,
                dictType: "",
                dictName: "",
                dictKey: "",
                dictValue: "",
                sort: 0,
                status: 1,
                remark: "",
                createTime: "",
                updateTime: ""
            }
        }
    }
)

// 定义回调事件
const emits = defineEmits(["CloseAdd"])

// 关闭弹窗
const handleClose = () => {
    emits("CloseAdd")
}

// 提交表单
const submit = async (ruleFormRef: FormInstance | undefined) => {
    if (!ruleFormRef) return
    await ruleFormRef.validate(async (valid) => {
        if (valid) {
            const params = { ...form.value }
            
            if (props.info) {
                // 编辑操作
                const res = await updateDict(params) as any
                if (res.status) {
                    ElMessage({
                        message: '编辑成功！',
                        type: 'success',
                    })
                }
            } else {
                // 新增操作
                const res = await addDict(params) as any
                if (res.status) {
                    ElMessage({
                        message: '新增成功！',
                        type: 'success',
                    })
                }
            }
            emits("CloseAdd")
        }
    })
}

// 取消操作
const close = (ruleFormRef: FormInstance | undefined) => {
    if (!ruleFormRef) return
    ruleFormRef.resetFields()
    emits("CloseAdd")
}
</script>

<style lang="scss" scoped>
.form {
    .btn {
        margin-top: 20px;
        text-align: right;
    }
}
</style>